import { componentsList } from "../../components"
import { useState } from 'react'

export const Material = () => {
  const [isDragging, setDragging] = useState(false)

  const handleDragStart = (e, item) => {
    setDragging(true)
    e.dataTransfer.setData('text/plain', item.name)
    // console.log(`dragStart: ${item.name}`)
  }

  const handleDragEnd = () => {
    setDragging(false)
  }

  return <div style={{width: '200px', padding: '5px'}}>
    组件库
    <div>
      {componentsList.map(item=>{
        return (
          <div 
            style={{border: '1px solid #bdbdbd', borderRadius: '5px', padding: '5px', marginTop: '5px'}}
            draggable
            onDragStart={(e)=> handleDragStart(e, item)}
            onDragEnd={handleDragEnd}
            key={item.name}
          >
            {item.label}
          </div>
        )
      })}
    </div>
  </div>
}